/*
 * @Description: 备份
 * @Author: Zzt
 * @Date: 2022-11-11 14:52:39
 * @LastEditTime: 2023-01-30 14:09:09
 */
import VisualizationMain from '@/components/DataVisualization/VisualizationMain';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import styles from '../styles/backupAndMaintenance.module.scss';
import { useBackupAndMaintenanceContext } from '../contexts/BackupAndMaintenanceContext';
const cx = classNames.bind(styles);

const table = [
  { title: '时间', dataIndex: 'time', key: 'time' },
  { title: '类型', dataIndex: 'typeName', key: 'typeName' },
  { title: '操作人员', dataIndex: 'optName', key: 'optName' },
  { title: '次数', dataIndex: 'times', key: 'times' }
];
const BackupWarp = () => {
  const { setBakChartData, setBakTableData, dataBakList, chartBakList } =
    useBackupAndMaintenanceContext();
  const [limit, setLimit] = useState<any>({});
  // 选中的按照类型
  const options = [
    {
      title: '操作人',
      name: 'optId',
      checkList: [
        { value: 1, label: '操作人1' },
        { value: 2, label: '操作人2' },
        { value: 3, label: '操作人3' },
        { value: 4, label: '操作人4' }
      ]
    },
    {
      title: '类型',
      name: 'configType',
      checkList: [
        { value: 1, label: '系统备份-自动' },
        { value: 2, label: '系统备份-手动' }
      ]
    }
  ];
  const condition = <></>;
  const tableList = table;

  const [visibleData, setVisibleData] = useState([]);
  const [xData, setXData] = useState([]);
  const [yData, setYData] = useState([]);
  const [listQuery, setListQuery] = useState({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });

  useEffect(() => {
    setBakChartData({ ...limit });
    setListQuery((state) => {
      return { ...state, pageNo: 1 };
    });
  }, [limit]);
  useEffect(() => {
    const param = { ...limit, menuType: 1 };
    setBakTableData({ ...listQuery, param });
  }, [limit, listQuery]);
  useEffect(() => {
    if (chartBakList.length > 0) {
      setVisibleData(dataBakList);
      setYData(chartBakList?.map((item: any) => item?.name));
      setXData(chartBakList?.map((item: any) => item?.count));
    }
  }, [dataBakList, chartBakList]);

  const ChangNo = (num: any) => {
    setListQuery((state) => {
      return { ...state, pageNo: num };
    });
  };
  /* 改变触发 */
  const onChangeYear = (value: any) => {
    setLimit(value.chioce);
  };
  return (
    <>
      <div>
        <h3 className={cx('title')}>系统备份</h3>
      </div>
      <VisualizationMain
        getList={setBakTableData}
        type={'按时间'}
        condition={condition}
        segmented={[]}
        tableList={tableList}
        choiceList={options}
        data={{ visibleData, xData, yData }}
        onChange={onChangeYear}
        ChangNo={ChangNo}
      />
    </>
  );
};
export default BackupWarp;
